<template>
  <div class="">
    <ul class="particulars">
      <li>
        <i class="el-icon-document"></i>
        <span
          >总订单
          <p>{{ zdd }}</p>
        </span>
      </li>
      <li>
        <i class="el-icon-s-data"></i>
        <span
          >总销售额
          <p>{{ xx }}</p>
        </span>
      </li>
      <li>
        <i class="el-icon-set-up"></i>
        <span
          >今日订单数
          <p>{{ dds }}</p>
        </span>
      </li>
      <li>
        <i class="el-icon-coin"></i>
        <span
          >今日销售额
          <p>55852</p>
        </span>
      </li>
    </ul>
    <div class="datas" id="eacharts"></div>
  </div>
</template>

<script>
import { totaldata } from "@/apis/order";
import * as echarts from "echarts";
export default {
  data() {
    return {
      zdd: "",
      xx: "",
      dds: "",
      jrxs: "",
    };
  },
  mounted() {
    totaldata().then((res) => {
      // console.log(res);
      this.zdd = res.data.totalOrder;
      this.xx = res.data.totalAmount;
      this.dds = res.data.todayOrder;
      this.jrxs = res.data.totayAmount;
      var chartDom = document.getElementById("eacharts");
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        title: {
          text: "数据统计",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["订单数据", "金额数据"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: res.data.xData,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "订单数据",
            type: "line",

            data: res.data.orderData,
          },
          {
            name: "金额数据",
            type: "line",

            data: res.data.amountData,
          },
        ],
      };

      option && myChart.setOption(option);
    });
  },
};
</script>

<style lang="less" scoped>
.particulars {
  width: 100%;
  display: flex;
  list-style: none;
  justify-content: space-around;
  li {
    display: flex;
    width: 23%;
    height: 90px;
    background-color: #fff;
    justify-content: space-around;
    align-items: center;
    i {
      display: block;
    }
    span {
      font-size: 14px;

      text-align: center;
      color: #ccc;
      display: block;
      p {
        font-weight: normal;
        color: rgb(43, 42, 42);
        margin-top: 2px;
        font-size: 20px;
      }
    }
  }
}
.datas {
  box-sizing: border-box;
  width: 98%;
  padding: 15px;
  margin: 15px auto;
  height: 430px;
  background-color: #fff;
}
.el-icon-document,
.el-icon-s-data,
.el-icon-set-up,
.el-icon-coin {
  font-size: 60px;
  color: rgb(103, 158, 209);
}
</style>